link元素标记:必须放到head中,不能包含其他标记语言,只能有样式规则,media属性广泛支持的有all(表现所有媒体) screen(屏幕媒体) print(打印)
		media可以使用多个值用逗号隔开
		候选样式表需要讲rel的值设置为alternatestylesheet 只有当用户选择这个样式表时才会使用这个  如果浏览器支持 可结合使用title生成
		一个候选样式列表,供用户选择
		如果为rel为stylesheet的link指定了title那么也就指定了将该样式表将作为首选 但是一旦选择了候选就不能使用首选样式表了  如果没有title那么
		它将作为一个永久样式表 一般都是这样做
style元素:一定要使用type属性  @import url("global.css");只能在style标签中使用,也可以用来引入外部样式表
特殊性:由特殊性决定最终将哪个样式作为文档样式,一般有由四个值来表示:0(内联样式) 0(id选择器) 0(类选择器 属性选择器 伪类) 0(html元素 伪元素),;
	比较的规则是  1 0 0 0 大于 0 1 0 0大于 0 0 1 0大于0 0 0 1
	color:red !important 表示重要性  当重要性声明和非重要性声明冲突的时候胜出的是前者;
继承:样式不仅会应用到指定元素还会应用到他的后代元素;继承的值没有特殊性甚至连0的特殊性都没有  即在父元素中指定文本样式 子类继承如果子类设置了样式那么就会用
	子类的样式
层叠:当同一个元素的几个css样式 ;
	层叠规则:有重要标志的胜出	特殊性高的胜出(重要的和重要的特殊性比较 非重要的和非重要的比较);
			如果两个规则的权重和特殊性完全相同那么在样式表中最后出现的胜出  如果有导入样式表那么导入样式表在前主样式表在后
			一般链接样式顺序是 :link :visited :hover :active顺序
相对长度单位:       
		em:根据当前元素的font-size大小来确定如font-size是14像素    那么1em=14像素; 如果是直接用em来设置字体大小那么此时的em是相对于父元素
		百分数:总是根据从父元素继承来的大小进行计算;
		块级元素都可以使用text-indent
		text-align只能设置块级元素的内联内容
如果没有设置边框 那么边框的颜色为文本颜色的前景色
-----------------------------------------------------------块级元素
------------------------------------------水平格式化
css中一个元素的最大宽度是父元素的宽度   水平总长度=元素内容的宽度+元素的内边距+元素的外边距
可以设置为auto的属性:width和外边距;  如果其中之设置其中一个为auto那么该属性的长度会直至填满父元素的宽度  
如果都设置了确定值那么会强制把右边设置为auto来填满父元素 如果设置两个auto那么会平分  如果没有为外边距和宽设置那么外边距就是0
对于块级元素可以设置最小宽度 替换元素中的水平格式如果width设置为auto那么将是元素的固有宽度  比如一张图片的宽是20 那么设置为auto的话将是20
	------------------------------------------垂直格式化
一个元素的默认高度由其内容决定  如果不给高度设置特定值 那么高度会更具情况变化
在正常流中上下边距设置为auto的话 值将为0	
合并垂直外边距:两个外边距中较大的会替换较小的  如果外边距设置为负,那么会被拉向相应的方向;
-----------------------------------------------------------行内元素
如果行内元素的行高设置大于内容区域 那么行高减去内容高度除以二的值作为上下内边距
-----------------------------------------------------------内边距 边框 外边距
背景会延伸到内边距中不会到外边距 其中width和height不适用于行内非替换元素如a   只适用于块级元素和替换元素






------------------------------------------------------------------------------------note_mdn
CSS 的属性和属性值都是区分大小写的 如果使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，
------------------------------------------------------选择器
选择器(这里列举的书除了id 元素 类选择器):
		存在和值（Presence and value）属性选择器:[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
											[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
											[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，
														比如位于被空格分隔的多个类（class）中的一个类;
		子串值（Substring value）属性选择器:[attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）。
										[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
										[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
										[attr*=val] : 选择attr属性的值中包含字符串val的元素;
		伪类（Pseudo-class）:是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素(查阅mdn)
		伪元素:伪元素前缀是两个冒号 (::)(查阅mdn)
A,B	匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A;
-------------------------------------------------------CSS的值和单位 
绝对单位（ absolute units）:像素 (px) 是一种， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的;
相对单位:他们是相对于当前元素的字号（ font-size ）或者视口（viewport ）尺寸;
		em:1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，
			这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，
			em的像素值就会变得复杂。em是Web开发中最常用的相对单位;
		rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用(相对于根元素的字体大小);
百分比:使用固定宽时当视口变得比屏幕更窄时，它将从屏幕上消失。而使用百分比的宽度,宽度随着视口（viewport ）的变化而变化;
颜色:
	关键词:最简单、最古老的颜色类型在CSS颜色关键词(red blue);
	十六进制值:#0000;
	RGB: rgb(255,0,0),-这是给定的三个参数表示的红色，绿色和蓝色通道的颜色值每个通道不是由两个十六进制数字表示的，而是由0到255之间的十进制数表示的
	HSL:该hsl()函数接受的色相、饱和度以及明度值，色调：颜色的底色调。这个值在0到360之间，表示色轮周围的角度。
										饱和度：饱和度是多少？这需要一个价值从0-100%，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。
										明度：颜色有多亮或明亮？这需要一个价值从0-100%，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白;
	RGBA 和 HSLA:不仅允许您设置想要显示的颜色,还有此颜色的透明度（ transparency ）。(rgba(255,0,0,0.5),hsla(240,100%,50%,0.5))
				它们相应的函数采用同样的参数,再加上第四个值，范围在0 - 1——设置透明度,或alpha通道。0是完全透明的,1是完全不透明的
	不透明度（Opacity）:与设置某个特定颜色的透明度相比，这会设置所有选定元素以及它们的孩子节点的不透明度;
-------------------------------------------------------层叠和继承
层叠:
什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）
重要性（Importance）
专用性（Specificity）
源代码次序（Source order）

重要性:总是优先于其他规则：!important。把它加在属性值的后面可以使这条声明有无比强大的力量。
	  但是！我们建议你千万不要使用它，除非你绝对必须使用它。您可能不得不使用它的一种情况是;
	  由于 !important 改变了层叠正常工作的方式，因此调试CSS问题，尤其是在大型样式表中，会变得非常困难。
专用性(特殊性):千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
			百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
			十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
			个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分;
源代码次序:如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜——后面的规则将战胜先前的规则;
继承:
	其思想是，应用于某个元素的一些属性值将由该元素的子元素继承，而有些则不会;(需要注意的是默认情况下浏览器设置链接的颜色为蓝色，而不是自然继承color属性)
	控制继承:CSS为处理继承提供了三种特殊的通用属性值：(initial 和 unset 不被IE支持。)
										inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。
										initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。
										unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial;
--------------------------------------------------------框模型(盒模型);
每个元素被表示为一个矩形的方框，框的内容、内边距、边界和外边距像洋葱的膜那样，一层包着一层构建起来。
浏览器渲染网页布局时，它会算出每个框的内容要用什么样式，周围的洋葱层有多大，以及框相对于其它框放在哪里

这里的框属性 我们说的所有对于框的应用都表示的是块级元素的
框属性:width 和 height padding border margin 外边距有一个特别的行为被称作外边距塌陷（margin collapsing）：
	当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。 ，内容的width 被设置为可用空间的100%（在外边距，边界和内边距已经占据了它们的份额后;
	,内容的 height默认设置为其内部内容的高度
	默认情况下background-color/background-image 延伸到了边界的边沿（the edge of the border）。
	该行为可以使用将在Background_clip 章中学到的background-clip 属性来改变。
	如果内容框变得比示例输出的窗口大，它将从窗口溢流，然后滚动条将会出现允许你滚动窗口来查看盒子剩余的内容 。你可以使用overflow属性来控制溢流
	溢流:auto: 当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。
		hidden: 当内容过多，溢流的内容被隐藏。
		visible: 当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为;
	背景裁剪（Background clip）:假使你有一个平铺的背景图，你只想要它延伸到内容的边沿,行为可以通过设置盒子的background-clip属性来调整;
CSS 框类型:框类型应用通过指定display属性;
		块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box）
		行内框（ inline box）与块框是相反的 对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响
		行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，
								而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开
----------------------------------------------------------文本样式
颜色:设置选中元素的前景内容的颜色(通常指文本，不过也包含一些其他东西 如p段落等) 接受任何合法的 CSS 颜色单位,;
字体: font-family 这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；
	如果字体不可用，那么就会用浏览器默认的字体代替 default font;
	网页安全字体:说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体.(具体有哪些 参考mdn)
	默认字体:CSS 定义了 5 个常用的字体名称:  serif, sans-serif, monospace, cursive,和 fantasy. 
	字体栈:font-family: "Trebuchet MS", Verdana, sans-serif;在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，
		就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。
文字阴影:text-shadow;
文本布局:
		文本对齐 text-align:属性用来控制文本如何和它所在的内容盒子对齐;
		行高: line-height;
		字母和字间距:letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是字与字之间的间距;
----------------------------------------------------------样式列表
<ul>  和  <ol>  元素设置margin的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); （在这里注意的是浏览器默认字体大小为16px）。
<li>  默认是没有设置间距的。
<dl>  元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定。
<dd> 元素设置为： margin-left  40px (2.5em)。
在参考中提到的 <p>  元素设置 margin的顶部和底部: 16px(1em)，和其他的列表类型相同;
这三个属性可以在 <ul> 或  <ol> 元素上设置:list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
								list-style-position ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
								list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形;
管理列表计数:start	start="4";(列表)
		reversed 属性将启动列表倒计数(列表)
		value 属性允许设置列表项指定数值(列表项)
-----------------------------------------------------------Styling links(链接样式);
链接状态:Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。
		Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。
		Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover 伪类来应用样式。
		Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab  移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。
		Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 :active 伪类来应用样式。
		
		cursor 鼠标光标的样式
		正确的链接状态顺序是 a  a:link  a:visited  a:focus  a:hover  a:active
		
------------------------------------------------------------Web 字体
Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体
首先，在CSS的开始处有一个@font-face块，它指定要下载的字体文件：
@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}
在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的
 font-family: "myFont", "Bitstream Vera Serif", serif;
 网页字体有两件重要的事情要记住：:
 ------------------------------------------------------------样式化CSS盒子;
 如果盒子的高度被设置为百分比长度，那么盒子高度不会遵循这个设置了的百分比长度，而是总会采用盒子内容的高度，除非给它设置了一个绝对高度（例如，像素或者 em）。这比把页面上每个盒子的高度默认设置为视口高度的 100% 更方便。
边界（border）也会忽略百分比宽度设置。
外边距（margin）有一个特殊的行为，称为 外边距塌陷： 当两个盒子挨在一起时，二者之间的距离为两个挨着的外边距中最大的那个值，而不是二者的和。
溢流(Overflow ):当用绝对的值设置盒子的大小时（比如，固定像素的 width 和 height），内容可能会超出设置的大小，此时内容就会溢流盒子。要控制这时候发生的事情，我们可以使用 overflow 属性;
轮廓(Outline):盒子的 outline 看起来像边界，但是它不是盒模型的一部分。它表现得像边界，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline 是画在边界框之外，外边距区域之内;
 
只有父元素的高度固定 子元素才能用百分比设置高度   块元素默认是宽度100%